<template>
  <div>
    <div class="section1 clearfix" style="background-image:url(static/images/background.jpg)">
      <div class="section1-title"><h2><img src="static//images/logo.svg" />启辕汽车连锁商城管理系统-车辆特征分析与排行</h2></div>
      <div class='sub-box'>
        <stockBrand :stockBrand="stockBrand" :mark="markIn"></stockBrand>
        <stockBrand :stockBrand="outStockBrand" :mark="markOut"></stockBrand>
      </div>
      <div class='sub-box'>
        <stockColor :stockColor="stockColor" :mark="markIn"></stockColor>
        <stockColor :stockColor="outStockColor" :mark="markOut"></stockColor>
      </div>
      <div class='sub-box1'>
        <outInStockBrand :compareCarPrice="compareCarPrice"></outInStockBrand>
        <carCustomer :carCustomer="carCustomer" :mark="markIn"></carCustomer>
        <carCustomer :carCustomer="subCarCustomer" :mark="markOut"></carCustomer>
      </div>
    </div>
  </div>
</template>

<script>
  import stockBrand from './stockBrand';
  import stockColor from './stockColor';
  import outInStockBrand from './outInStockBrand';
  import carCustomer from './carCustomer';
  export default {
    data(){
      return {
        markIn:'in',
        markOut:'out',
        stockBrand:{},
        outStockBrand:{},
        carCustomer:{},
        subCarCustomer:{},
        stockColor:{},
        outStockColor:{},
        compareCarPrice:{},
        marketId:this.$route.query.marketId||1
      }
    },
    created(){
      this.getAll();
    },
    components:{stockBrand,stockColor,outInStockBrand,carCustomer},
    methods: {
      getAll() {
        axios.get('/controller/public/tvStatis/getCarOutRank?marketId='+this.marketId)//市场出库量排行
          .then((response) => {
            this.carCustomer = {//库存品牌数据
              shopName:this.dealData(response.data.result.carOutRank,'shopName').reverse(),
              storageNum:this.dealData(response.data.result.carOutRank,'storageNum').reverse(),
            };
          });
        axios.get('/controller/public/tvStatis/getCarSaleVolumeRank?marketId='+this.marketId)//市场销售额排行
          .then( (response)=> {
            this.subCarCustomer = {
              shopName:this.dealData(response.data.result.carSaleVolumeRank,'shopName').reverse(),
              storageNum:this.dealData(response.data.result.carSaleVolumeRank,'saleVolume').reverse(),
            };
          });
        axios.get('/controller/public/tvStatis/getBrandRank?marketId='+this.marketId)//获取库存品牌数据
          .then( (response)=> {
            this.stockBrand = {//库存品牌数据
              brandName:this.dealData(response.data.result.storageBrandRank,'brandName'),
              storageNum:this.dealData(response.data.result.storageBrandRank,'storageNum')
            };
            this.outStockBrand = {//出库品牌数据
              brandName:this.dealData(response.data.result.carOutBrandRank,'brandName'),
              storageNum:this.dealData(response.data.result.carOutBrandRank,'storageNum')
            };
          });
        axios.get('/controller/public/tvStatis/getColorRank?pageSize=10&marketId='+this.marketId)//获取库存颜色数据
          .then( (response)=> {
            this.stockColor = this.dealColorData(response.data.result.storageColorRank);
            this.outStockColor = this.dealColorData(response.data.result.carOutColorRank);
          });
        axios.get('/controller/public/tvStatis/getPriceRank?pageSize=7&marketId='+this.marketId)//获取销售车辆价格分析数据
          .then( (response)=> {
            this.compareCarPrice = response.data.result.carOutPriceRank;
          })
        setTimeout(()=>{
           this.getAll();
        },3600000)
      },
      dealData(data,name){
        var arr = [];
        for(var i=0;i<data.length;i++){
          arr.push(data[i][name])
        }
        return arr
      },
      dealColorData(data){
        var arr = [];
        for(var i=0;i<data.length;i++){
          arr.push({value:data[i].storageNum,name:data[i].carOutColor})
        }
        return arr;
      }
    }
  }
</script>
